<template>
  <div>
      <Row class="body">
        <i-col span="8">介绍</i-col>
        <i-col span="8">详情图片</i-col>
        <i-col span="3">操作</i-col>
      </Row>

      <Row class="list" v-for="(item,index) of bankList" :key="index">
        <i-col span="8" v-if="item.id == 1">极速办卡奖励说明</i-col>
        <i-col span="8" v-else>消费神器规则说明</i-col>
        <i-col span="8">
          <img :src="item.url"  style="width:50px;height:50px">
          <UploadImg  :bankId="item.id" @showParentComp="showParentComp"></UploadImg>
        </i-col>
        <i-col span="3">
          <i-button type="info" size="small"  @click="handleUpdateManager(item.id,item.url)">修改</i-button>
        </i-col>
      </Row>
  </div>
</template>

<script>
import axios from 'axios'
import UploadImg from './UploadImg'
export default {
  name: 'imgsUrlList',
   components: {
    UploadImg
  },
  data () {
    return {
        bankList:''
      }
  },
  methods: {
    showParentComp(data,id){
      console.log('data=============',data)
      console.log('id=============',id)
      for (let index = 0; index < this.bankList.length; index++) {
        const element = this.bankList[index];
        if(element.id===id){
          element.url=data
        }
      }
    },
    getListInfo () {
      axios.post('/web/api/manager/imgsUrlList').then(this.getListInfoSucc)
    },
    getListInfoSucc (res) {
      console.log("图片链接列表",res)
      this.bankList = res.data.date
    },
    handleUpdateManager (id,url) {
      axios.post('/web/api/manager/editImgsUrl',{"id":id,"url":url,"type":id}).then(this.updateInfoSucc)
    },
    updateInfoSucc (res) {
      console.log('修改', res)
      this.$Message.success("修改成功")
      this.getListInfo();
    },
  },
  mounted () {
    this.getListInfo();
  }
}
</script>
<style lang="stylus" scoped>
  .body
    width: 100%
    line-height 3
    font-size 14px
    color #2680c4
    background #eff3fa
    text-align center
  .list
    line-height 3
    font-size 14px
    text-align center
    color #2680c4


</style>

